element-ui radio-button组件源码学习

2018年10月09日Web前端0

前面看了radio组件的源码，接下来看下，与其类似的radio-group组件的源码。

一、html结构

最外层是一个label元素，使用了el-radio-button类。和radio类似，动态的class如下：

:class="[
    size ? 'el-radio-button--' + size : '',
    { 'is-active': value === label },
    { 'is-disabled': isDisabled },
    { 'is-focus': focus }
]"

size控制了radio-group的尺寸，剩下的还有active状态，disabled状态和focus状态的样式。

往内一层是一个原生的radio和span标签。 和radio类似，此input元素设置了change、focus和blur事件，由于设置了-1的tabindex，所以他不能被tab键选中。radiobutton中的给了z-index为-1的属性，所以我们看不到此元素。

input元素之后是实际显示内容的，当组件标签在使用时有内容时，则显示，否则显示对应的label的值。

<!-- 组件标签之间的内容显示 -->
<slot></slot>
<!-- 组件标签没有内容则，直接显示该组件的label值 -->
<template v-if="!$slots.default">{ {label}}</template>

二、JS部分

name

名称

mixins

混入广播事件

inject

注入了elForm和elFormItem，当没有与form和formitem使用时，此处的默认值就有用了。

props

  • label：当前组件对应的值
  • disabled：是否禁用
  • name：原生radio的name值，用于radio关联

data()

  • focus：该组件是否有焦点。

computed

  • value：获取当前选中值和设置值
value: {
    get() {
    // 直接返回group的值
        return this._radioGroup.value;
    },
    set(value) {
        // 修改radio-group组件中的model值
        this._radioGroup.$emit('input', value);
    }
    // 也就是radio-button必须和radio-group组件配合使用，因为他没有对应的model值，
    // 他所使用的都是group的。
}
  • _radioGroup()：查找到对应父group组件
_radioGroup() {
    let parent = this.$parent;
    // 循环向父级查找
    while (parent) {
        if (parent.$options.componentName !== 'ElRadioGroup') {
            parent = parent.$parent;
        } else {
            // 返回对应的父组件引用
            return parent;
        }
    }
    return false;
}
  • activeStyle()：根据group的配置，来设置样式。
  • _elFormItemSize()：form item的大小。
  • size()：整体button大小，最后反馈到样式上。
  • isDisabled()：该组件是否禁用。
  • tabIndex()：设置tabindex的值。

methods

  • handleChange()
handleChange() {
    this.$nextTick(() => {
    // 由于是radiobutton要和group一起使用，所以没有判断是否有group组件。
        this.dispatch('ElRadioGroup', 'handleChange', this.value);
    });
}

附上带注释的源码：radio-button.vue 。

Element-uiVue源码解析纯原创

目录